<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px" v-loading.body="loading">

            <el-form-item label="模板选择">
                <el-select v-model="form.page" placeholder="请选择模板">
                    <el-option v-for="item in pageList" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

			<el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>

            <el-form-item label="副标题">
                <el-input v-model="form.subTitle"></el-input>
            </el-form-item>

			<el-form-item label="新闻类别">
                <el-cascader :options="newsTypeList" v-model="form.newsTypeList">
                </el-cascader>
            </el-form-item>


            <el-form-item label="标签">
                <el-select v-model="form.tagsList" multiple placeholder="请选择" class="tagsDiv">
                    <el-option v-for="item in tagsList" :label="item.label" :value="item.value" :key="item.value">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="标题图">
                <el-upload :action="fileUploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-upload="infoImageBeforeUpload" :on-success="infoImageUploadSuccess" :on-remove="infoImageRemove" :file-list="infoImageList">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny"  :modal="false" >
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>


            <el-form-item label="缩略图">
                <el-upload :action="fileUploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="thumbImageRemove" :before-upload="thumbImageBeforeUpload" :on-success="thumbImageUploadSuccess" :file-list="thumbImageList">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny" :modal="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>

            <el-form-item label="其他属性">
                <el-tabs type="border-card">
                    <el-tab-pane v-for="(item, index) in paramList" :label="item.name" :key="item.id">

                        <div v-if="(item.type == 'text')">
                            <el-input :placeholder="item.desc" @blur="paramType($event.target.value,item.param)" v-model="form.param[item.param]">
                                <template slot="prepend">{{item.name}}</template>
                            </el-input>
                        </div>

                        <div v-else-if="(item.type == 'file')">
                            <el-upload class="upload-demo"  :action="fileUploadAction" :data="{param:item.param}" :on-remove="paramFileRemove" :on-success="paramFileUpload" :file-list="fileList[item.param]">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="内容">
                <script id="editor" type="text/plain"></script>
            </el-form-item>
			<el-form-item label="seo关键词">
                <el-input v-model="form.seoKeyword"></el-input>
            </el-form-item>
            <el-form-item label="seo介绍">
                <el-input v-model="form.seoDesc"></el-input>
            </el-form-item>
			<el-form-item>
                <div class="btSubmitAddNews">
                    <el-button type="primary" @click="editResult">提交</el-button>
                </div>
            </el-form-item>

        </el-form>
	</div>
</template>

<script>
import _param from '../common/param.vue'
import _http from '../common/http.vue'
	export default{
        props:['editNewsTemplateToSonId'],
		data(){
			return {
                loading:false,
                fileUploadAction:_param.param.fileUploadUrl,
				id:0,
				pageList: [],
                newsTypeList: [],
                tagsList: [],
                paramList: [],
				form: {
                    id:'',
                    page: '',
                    title: '',
                    subTitle: '',
                    newsTypeList: [],
                    content: '',
                    tagsList: [],
                    seoKeyword: '',
                    seoDesc: '',
                    param: {},
                    infoImage:{},
                    thumbImage:{},
                    userId:''
                },
				newsInfo:{},
				infoImageList:[],
				thumbImageList:[],
				dialogVisible: false,
                dialogImageUrl: '',
                editor:null,
                fileList: [],//初始化文件列表
                uploadList:[],//上传的文件列表
			}
		},
		mounted(){
            this.loading = true
            this.editor = UE.getEditor('editor');
			this.id = this.editNewsTemplateToSonId
            _http.axiosRequest(this,'addNewsInitData',{type:_param.param.dtNewsType,infoType:_param.param.newsInfoType},(res)=>{
                this.pageList = res.data.pageList;
                this.newsTypeList = res.data.newsTypeList;
                this.tagsList = res.data.tagsList;
                this.paramList = res.data.paramList;
                this.getNewsInfo(this.id)
            })
		},
		destroyed() {
            this.editor.destroy();
        },
		methods:{
			paramType(value,obj){
        		if (value.length>0) {
        			this.form.param[obj] = value;
        		}
        	},
        	paramFileUpload(res,file,fileList){
        		this.uploadList[file.uid] = {
        			name:file.name,
        			url:file.response.url,
        			param:file.response.param
        		}
        	},
//            删除上传文件清空服务器上的内容
        	paramFileRemove(file,fileList){
        		if (this.uploadList[file.uid]) {
        			delete this.uploadList[file.uid]
        		}else{
        			for(let i in this.fileList){
        				for (var j = 0; j < this.fileList[i].length; j++) {
        					if (file.uid == this.fileList[i][j]['uid']) {
        						delete this.fileList[i][j]
        					}
        				}
        			}
        		}
        	},
			getNewsInfo(id){
                _http.axiosRequest(this,'newsInfo',{newsId:id},(res)=>{
                    this.newsInfo = res.data
                    this.form.param = JSON.parse(this.newsInfo.param)
                    for(let a in this.form.param){
                        //文件列表是个数组
                        if (Object.prototype.toString.call(this.form.param[a]) === '[object Array]') {
                            this.fileList[a] = this.form.param[a]
                        }
                    }
                    this.form.page = this.newsInfo.page_id
                    this.form.title = this.newsInfo.title
                    this.form.subTitle = this.newsInfo.sub_title
                    let newsTypeArr= this.newsInfo.news_type.split(',')
                    for (var i = 0; i < newsTypeArr.length; i++) {
                        this.form.newsTypeList.push(parseInt(newsTypeArr[i]))
                    }
                    let tagArr = this.newsInfo.tags_id.split(',')
                    for (var i = 0; i < tagArr.length; i++) {
                        this.form.tagsList.push(parseInt(tagArr[i]))
                    }
                    this.form.seoKeyword = this.newsInfo.seo_keyword
                    this.form.seoDesc = this.newsInfo.seo_desc
                    this.form.infoImage.url = this.newsInfo.info_img
                    this.form.thumbImage.url = this.newsInfo.thumb_img
                    this.infoImageList.push({'url':this.newsInfo.info_img})
                    this.thumbImageList.push({'url':this.newsInfo.thumb_img})
                    this.editor.setContent(this.newsInfo.content)
                    this.loading = false
                })
			},
			handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
			infoImageBeforeUpload(file){
        		if (this.form.infoImage.url) {
                    alert('只能允许上传一张');
                    return false;
                }
        	},
        	infoImageUploadSuccess(res,file,fileList){
        		this.form.infoImage = {
                    url: res.url
                }
        	},
        	infoImageRemove(file,fileList){
        		this.form.infoImage={}
        	},
        	thumbImageBeforeUpload(file){
        		if (this.form.thumbImage.url) {
                    alert('只能允许上传一张');
                    return false;
                }
        	},
        	thumbImageUploadSuccess(res,file,fileList){
        		this.form.thumbImage = {
                    url: res.url
                }
        	},
        	thumbImageRemove(file,fileList){
        		this.form.thumbImage={}
        	},
        	dealParamFileInfo(){
        		let newFileList= []
        		let _tFileList = this.fileList
        		for (let i in _tFileList) {
        			newFileList[i] = []
        			for (var j = 0; j < _tFileList[i].length; j++) {
        				if (_tFileList[i][j]) {
        					newFileList[i].push({name:_tFileList[i][j]['name'],url:_tFileList[i][j]['url']})
        				}
        			}
        		}
        		let _upFileList= this.uploadList
        		for (let i in _upFileList) {
        			if (newFileList[_upFileList[i]['param']]) {
        				newFileList[_upFileList[i]['param']].push({name:_upFileList[i]['name'],url:_upFileList[i]['url']})
        			}else{
        				newFileList[_upFileList[i]['param']] = []
        				newFileList[_upFileList[i]['param']].push({name:_upFileList[i]['name'],url:_upFileList[i]['url']})
        			}
        		}
        		for(let i in newFileList){
        			this.form.param[i] = newFileList[i]
        		}
        	},
        	editResult(){
        		this.dealParamFileInfo()
        		this.form.content = this.editor.getContent();
                this.form.userId = localStorage.getItem('userId')
                this.form.id = this.id

                _http.axiosRequest(this,'editNews',{form:this.form},(res)=>{
                    _http.apiResult(this,res.data)
                    this.$emit('closeEditNewsDialog')

                })
        	},
		}
	}
</script>

<style>
.tagsDiv {
    width: 100%;
}

.btSubmitAddNews {
    text-align: center;
}
</style>
